import { useThemeStore } from '@renderer/stores'
import HoverBox from './HoverBox'

interface SuggestionListProps {
  intellisenseList: string[]
  selectedIndex: number
  handleClickIntell: (intellisense: string) => void
}

const SuggestionList = ({
  intellisenseList,
  selectedIndex,
  handleClickIntell
}: SuggestionListProps) => {
  const { isDark } = useThemeStore()

  return (
    <>
      <div className="overflow-hidden relative">
        {intellisenseList.map((intellisense, index) => {
          return (
            <div
              onClick={() => handleClickIntell(intellisense)}
              className={[
                'h-[36px] px-4 cursor-pointer flex items-center whitespace-nowrap overflow-hidden text-ellipsis leading-[28px]',
                `${isDark ? 'bg-[#141414] hover:bg-[#414141] text-[#dcdcdc]' : 'hover:bg-blue-100 text-gray-800'}`
              ].join(' ')}
              key={index}
            >
              {intellisense}
            </div>
          )
        })}
        <HoverBox selectedIndex={selectedIndex} />
      </div>
    </>
  )
}

export default SuggestionList
